<template>
    <div>
        <div style="display: flex; align-items: center; padding: 10px; color: #fff">
            <span style="margin-right: 20px; font-weight: bold">专业专项预报</span>
            <span style="margin-right: 20px">|</span>
            <span style="display: flex; align-items: center">
                <span>流域预报</span>
            </span>
        </div>

        <!-- 表格 -->
        <div class="tables">
            <!-- 过去十天数据表格 -->
            <div class="table-container">
                <div class="table-title">过去10天逐日流域面雨量值</div>
                <el-table :data="historyTableData" :header-cell-style="headerCellStyle" :cell-style="cellStyle"
                    :row-style="rowStyle" style="width: 100%">
                    <el-table-column prop="county" label="地区" width="120" align="center"></el-table-column>
                    <el-table-column prop="watershed" label="流域" width="120" align="center"></el-table-column>
                    <el-table-column v-for="(date, index) in historyDates" :key="'history-' + index"
                        :prop="'day' + index" :label="date" align="center">
                    </el-table-column>
                </el-table>
            </div>

            <!-- 未来十天数据表格 -->
            <div class="table-container">
                <div class="table-title">未来10天逐日流域面雨量值</div>
                <el-table :data="forecastTableData" :header-cell-style="headerCellStyle" :cell-style="cellStyle"
                    :row-style="rowStyle" style="width: 100%">
                    <el-table-column prop="county" label="地区" width="120" align="center"></el-table-column>
                    <el-table-column prop="watershed" label="流域" width="120" align="center"></el-table-column>
                    <el-table-column v-for="(date, index) in forecastDates" :key="'forecast-' + index"
                        :prop="'day' + index" :label="date" align="center">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { reqBasin, reqBasinData, reqBasinForecast } from '@/api/professional_specialization'

// 处理时间格式
import moment from 'moment';
export default {
    data() {
        return {
            basin: [],
            basinData: [],
            basinForecast: [],
            historyTableData: [], // 过去十天数据
            forecastTableData: [], // 未来十天数据
            historyDates: [], // 过去十天的日期
            forecastDates: [], // 未来十天的日期
        };
    },
    mounted() {
        this.getBasin();
        this.generateDates();


    },

    methods: {
        // 获取流域
        async getBasin() {
            let res = await reqBasin()
            this.basin = res.data.data
            this.getBasinForecast()
            this.getBasinData()
        },
        // 获取过去十天地区雨量数据

        // 生成日期数组
        generateDates() {
            // 生成过去十天的日期
            for (let i = 9; i >= 0; i--) {
                const date = moment().subtract(i, 'days').format('MM-DD');
                this.historyDates.push(date);
            }
            // 生成未来十天的日期
            for (let i = 1; i <= 10; i++) {
                const date = moment().add(i, 'days').format('MM-DD');
                this.forecastDates.push(date);
            }
        },

        // 处理过去十天数据
        async getBasinData() {
            this.historyTableData = [];
            for (const item of this.basin) {
                const res = await reqBasinData(item.county);
                if (res.data.data) {
                    const rowData = {
                        county: item.county,
                        watershed: item.watershed,
                    };
                    // 添加十天的数据
                    res.data.data.forEach((value, index) => {
                        rowData['day' + index] = value;
                    });
                    this.historyTableData.push(rowData);
                }
            }
        },
        // 获取未来十天流域预报

        // 处理未来十天数据
        async getBasinForecast() {
            this.forecastTableData = [];
            for (const item of this.basin) {
                const res = await reqBasinForecast(item.watershed);
                if (res.data.data) {
                    const rowData = {
                        county: item.county,
                        watershed: item.watershed,
                    };
                    // 处理未来十天的数据
                    // 因为返回的数据是 d1-d10 的格式
                    for (let i = 0; i < 10; i++) {
                        const dayKey = 'd' + (i + 1);
                        rowData['day' + i] = res.data.data[dayKey] || '0.0';
                    }
                    this.forecastTableData.push(rowData);
                }
            }
        },

        headerCellStyle() {
            return {
                background: "#0c2340",
                color: "#fff",
            };
        },
        cellStyle() {
            return {
                background: "#05152e",
                color: "#fff",
            };
        },
        rowStyle() {
            return {
                height: "30px",
            };
        },
    },

};
</script>

<style scoped lang="scss">
.custom-select .el-input__inner,
.el-date-picker .el-input__inner {
    background-color: rgb(36, 54, 101) !important;
    color: white !important;
    font-weight: bold !important;
    border: 2px solid #fff !important;
}

::v-deep .el-table__body-wrapper {

    // 整个滚动条
    &::-webkit-scrollbar {
        width: 10px; // 纵向滚动条的宽度
        background: rgba(213, 215, 220, 0.3);
    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
        border: 5px solid white;
    }
}

// 滚动条的滑块
::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #0c2340;
    border-radius: 2px;
}

// --------------------隐藏table gutter列和内容区右侧的空白 start
::v-deep .el-table th.gutter {
    display: none;
    width: 0
}

::v-deep .el-table colgroup col[name='gutter'] {
    display: none;
    width: 0;
}

// 这个样式不加的话内容哪里会缺一点，估计是因为滚动条哪里缺的没有补上
::v-deep .el-table__body {
    width: 100% !important;
}

// --------------------隐藏table gutter列和内容区右侧的空白 end把以上改成css

.selection {
    width: 100%;
    margin: 20px 0;
}

.tables {
    padding: 20px;
}

.table-container {
    margin-bottom: 30px;
}

.table-title {
    font-size: 18px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
    width: 100%;
}

::v-deep .el-table {
    background-color: transparent;

    th {
        background-color: #0c2340;
        color: #fff;
        font-weight: bold;
    }

    td {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(255, 255, 255, 0.1);
}
</style>